<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="../webjars/layui/2.5.6/css/layui.css"
	media="all">
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>添加商品</legend>
	</fieldset>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" v-model="pname" lay-verify="title"
					autocomplete="off" placeholder="请输入标题" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">商城价</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" v-model="shopPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">市场价</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" v-model="marketPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">热卖</label>
			<div class="layui-input-block">
				<input type="radio" lay-filter="ishot" v-model="isHot" name="ishot" value="1" title="热卖">
			    <input type="radio" lay-filter="ishot" v-model="isHot" name="ishot" value="0" title="非热卖">
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-block">
			<!-- <button type="button" class="layui-btn" id="test1">上传图片</button> -->
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" alt="请选择图片"
			    	style="border: 1px solid blue; height: 200px; width: 150px;cursor: pointer;">
			    <p id="demoText"></p>
			  </div>
			</div>
		</div>
		
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品描述</label>
			<div class="layui-input-block">
				<textarea v-model="pdesc" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="submit" class="layui-btn" lay-submit=""
					lay-filter="demo1" @click.prevent="save">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script src="../webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
	<script src="../js/vue.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
	<script type="text/javascript">
		var v = new Vue({
			el : ".layui-form",
			data : {
				pname: "",
				shopPrice : 0,
				marketPrice : 0,
				isHot : 0,
				pdesc : "",
				pid : null,  // 修改的商品 pid 有值
				imagesrc : null
			},
			// 装载函数(生命周期) vue 在构建完界面元素之后执行
			mounted () {
				//form.render(); //更新全部
				//form.render('select'); //刷新select选择框渲染
				
				// 构建文件上传控件
				layui.upload.render({
				    elem: '#demo1' // 图片上传按钮
				    ,url: '../upload.s' //改成您自己的上传接口
				    ,done: res=>{
				    	// res != axios 的 res
				    	if(res.code==1){
				    		demo1.src = res.data;
				    		this.imagesrc = res.data;
				    	}
				    }
				});
				
				// 渲染表单
				layui.form.render();
				
				// 给单选框添加选择事件(单选框是layui内置控件)
				layui.form.on('radio(ishot)', data=>{
				  this.isHot = data.value;
				}); 
			},
			created(){
				// 如果是修改商品, 那么要读取地址中的商品id
				let pid = location.search;  // ?pid=1
				pid = pid.replace(/\?pid=(\d+)/, "$1");
				if(pid>0){
					// 修改商品,获取商品信息,展示在页面
					axios.get("../product/get.s?pid=" + pid).then(res=>{
						// 将查询到到的商品渲染到页面
						// 必须设置 pid 的值
					})
				}
				
			},
			methods :{
				save(){
					let url = "../product/save.s";
					var param = new URLSearchParams();
					param.append("pname",this.pname);
					param.append("shopPrice",this.shopPrice);
					param.append("marketPrice",this.marketPrice);
					param.append("isHot",this.isHot);
					param.append("pdesc",this.pdesc);
					param.append("image",this.imagesrc);
					axios.post(url,param).then(res=>{
						alert(res.data.msg);
					});
				}
			}
		})
	
	</script>
	
	

</body>
</html>